import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Card, message, Button, Spin } from 'antd';
import React from 'react';
import moment from 'moment';
import router from 'umi/router';
import { connect } from 'dva';
import queryString from 'query-string';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import DescriptionList from '@/components/DescriptionList';
import FooterToolbar from '@/components/FooterToolbar';
import StandardTable from '@/components/StandardTable';

const { Description } = DescriptionList;

@connect(({ oncechargens, loading }) => ({
  empDetailList: oncechargens.empDetailList,
  oncechargens,
  loading: loading.models.oncechargens,
}))
class ClientInfoDetails extends React.Component {
  state = {
    detailData: [],
    onceFeeChrgId: null,
  };

  componentDidMount() {
    const { location, dispatch } = this.props;
    const tempUrl = location.search;
    const { onceFeeChrgId } = queryString.parse(tempUrl);
    dispatch({
      type: 'oncechargens/getDetailData',
      payload: { onceFeeChrgId },
    }).then(res => {
      if (res.success && res.data) {
        this.setState({
          detailData: res.data,
          onceFeeChrgId,
        });
      } else {
        message.warning(`${res.message || '暂无数据！'}`);
      }
    });
    this.getList(1, 10, onceFeeChrgId);
  }

  getList = (currentPage = 1, pageSize = 10, onceFeeId) => {
    const { dispatch } = this.props;
    const pageArg = {
      currentPage,
      pageSize,
    };
    dispatch({
      type: 'oncechargens/getDetailList',
      payload: { pageArg, onceFeeChrgId: onceFeeId },
    });
  };

  // 表格有变化：比如：切换页码
  handleStandardTableChange = pagination => {
    const { onceFeeChrgId } = this.state;
    this.getList(pagination.current, pagination.pageSize, onceFeeChrgId);
  };

  render() {
    const { detailData } = this.state;
    const { loading, empDetailList } = this.props;
    const columns = [
      {
        title: '姓名',
        dataIndex: 'empName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '证件类型',
        dataIndex: 'idTypeName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '证件号',
        dataIndex: 'idNo',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '收费金额',
        dataIndex: 'feeAmo',
        align: 'right',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => <span>{val === 0 ? 0 : (val && val) || '--'}</span>,
      },
      {
        title:
          detailData.pdId === 'PDINF_0000000001' ||
          detailData.pdId === 'PDINF_0000000002' ||
          detailData.pdId === 'PDINF_0000000004' ||
          detailData.pdId === 'PDINF_0000000005'
            ? '个人金额'
            : null,
        dataIndex:
          detailData.pdId === 'PDINF_0000000001' ||
          detailData.pdId === 'PDINF_0000000002' ||
          detailData.pdId === 'PDINF_0000000004' ||
          detailData.pdId === 'PDINF_0000000005'
            ? 'perAmo'
            : null,
        align: 'right',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val =>
          detailData.pdId === 'PDINF_0000000001' ||
          detailData.pdId === 'PDINF_0000000002' ||
          detailData.pdId === 'PDINF_0000000004' ||
          detailData.pdId === 'PDINF_0000000005' ? (
            <span>{val === 0 ? 0 : (val && val) || '--'}</span>
          ) : null,
      },
      {
        title:
          detailData.pdId === 'PDINF_0000000001' ||
          detailData.pdId === 'PDINF_0000000002' ||
          detailData.pdId === 'PDINF_0000000004' ||
          detailData.pdId === 'PDINF_0000000005'
            ? '企业金额'
            : null,
        dataIndex:
          detailData.pdId === 'PDINF_0000000001' ||
          detailData.pdId === 'PDINF_0000000002' ||
          detailData.pdId === 'PDINF_0000000004' ||
          detailData.pdId === 'PDINF_0000000005'
            ? 'comAmo'
            : null,
        align: 'right',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val =>
          detailData.pdId === 'PDINF_0000000001' ||
          detailData.pdId === 'PDINF_0000000002' ||
          detailData.pdId === 'PDINF_0000000004' ||
          detailData.pdId === 'PDINF_0000000005' ? (
            <span>{val === 0 ? 0 : (val && val) || '--'}</span>
          ) : null,
      },
      {
        title: '服务费',
        dataIndex: 'fee',
        align: 'right',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => <span>{val === 0 ? 0 : (val && val) || '--'}</span>,
      },
      {
        title: '备注',
        dataIndex: 'remark',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => (val && val) || '--',
      },
    ];
    return (
      <Spin tip="Loading..." spinning={loading}>
        <PageHeaderWrapper>
          <Card title={<span style={{ fontWeight: 'bolder' }}>基本信息</span>}>
            {+detailData.feeWay === 1 ? (
              <DescriptionList>
                <Description term="产品">{detailData.pdName || '--'}</Description>
                <Description term="收费方式">{detailData.feeWayName || '--'}</Description>
                <Description term="签约方">{detailData.ordSndrName || '--'}</Description>
                <Description term="客户">
                  {`${detailData.custName}（${detailData.custNo}）` || '--'}
                </Description>
                <Description term="业务年月">
                  {detailData.busiYm
                    ? `${`${detailData.busiYm}`.substring(0, 4)}-${`${detailData.busiYm}`.substring(
                        4
                      )}`
                    : '--'}
                </Description>
                <Description term="收费总金额">
                  {detailData.feeAmo === 0 ? 0 : (detailData.feeAmo && detailData.feeAmo) || '--'}
                </Description>
                <Description term="状态">{detailData.feeStaName || '--'}</Description>
                <Description term="编号">{detailData.onceFeeChrgNo || '--'}</Description>
                <Description term="创建时间">
                  {moment(detailData.creTime).format('YYYY-MM-DD HH:mm') || '--'}
                </Description>
                <Description term="创建人">{detailData.creName || '--'}</Description>
                <Description term="备注">{detailData.remark || '--'}</Description>
                <Description term="确认收费人员">{detailData.operName || '--'}</Description>
                <Description term="确认收费时间">
                  {detailData.operTime
                    ? moment(detailData.operTime).format('YYYY-MM-DD HH:mm:ss')
                    : '--'}
                </Description>
              </DescriptionList>
            ) : (
              <DescriptionList>
                <Description term="产品">{detailData.pdName || '--'}</Description>
                <Description term="收费方式">{detailData.feeWayName || '--'}</Description>
                <Description term="签约方">{detailData.ordSndrName || '--'}</Description>
                <Description term="客户">
                  {`${detailData.custName}（${detailData.custNo}）` || '--'}
                </Description>
                <Description term="业务年月">
                  {detailData.busiYm
                    ? `${`${detailData.busiYm}`.substring(0, 4)}-${`${detailData.busiYm}`.substring(
                        4
                      )}`
                    : '--'}
                </Description>
                <Description term="收费总金额">
                  {detailData.feeAmo === 0 ? 0 : (detailData.feeAmo && detailData.feeAmo) || '--'}
                </Description>
                <Description term="收费年月">
                  {detailData.feeYm
                    ? `${`${detailData.feeYm}`.substring(0, 4)}-${`${detailData.feeYm}`.substring(
                        4
                      )}`
                    : '--'}
                </Description>
                <Description term="状态">{detailData.feeStaName || '--'}</Description>
                <Description term="编号">{detailData.onceFeeChrgNo || '--'}</Description>
                <Description term="创建时间">
                  {moment(detailData.creTime).format('YYYY-MM-DD HH:mm') || '--'}
                </Description>
                <Description term="创建人">{detailData.creName || '--'}</Description>
                <Description term="备注">{detailData.remark || '--'}</Description>
                <Description term="确认收费人员">{detailData.operName || '--'}</Description>
                <Description term="确认收费时间">
                  {detailData.operTime
                    ? moment(detailData.operTime).format('YYYY-MM-DD HH:mm:ss')
                    : '--'}
                </Description>
              </DescriptionList>
            )}
          </Card>
          <Card title={<span style={{ fontWeight: 'bolder' }}>员工明细</span>}>
            <StandardTable
              selectedRows={[]}
              selectedRowKeys={[]}
              loading={loading}
              data={empDetailList}
              rowKey="onceFeeDetId"
              rowSelection={null}
              columns={columns}
              onChange={this.handleStandardTableChange}
            />
          </Card>
          <FooterToolbar style={{ width: '100%' }}>
            <Button onClick={() => router.goBack()}>返回</Button>
          </FooterToolbar>
        </PageHeaderWrapper>
      </Spin>
    );
  }
}

export default Form.create({})(ClientInfoDetails);
